<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div>
            <button @click="search1()">get请求 请求txt</button>
        </div>
        <div>
            <button @click="search2()">get请求 请求/get</button>
        </div>
        <div>
            <button @click="search3()">get请求 请求/post</button>
        </div>
        <div>
            <button @click="search4()">get请求 请求/post</button>
        </div>
        <div>
            <button @click="search5()">get请求 请求/post</button>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {

            },
            methods: {
                search1() {
                    // axios.get(url[,config])
                    axios.get("01aaa.txt")
                    .then(
                        res => {
                            console.log("结果：", res.data);
                        }
                    ).catch(err => {
                        console.log(err);
                    })
                },
                search2() {
                    // axios.get(url[,config])
                    axios.get("http://localhost:8000/get",{
                        params:{
                            a:100,
                            b:200
                        }
                    })
                    .then(
                        res => {
                            console.log("结果：", res.data);
                        }
                    ).catch(err => {
                        console.log(err);
                    })
                },
                search3() {
                    // axios.get(url[,config])
                    axios.post("http://localhost:8000/post",{   
                        name:'张三',
                        age:20
                    },{
                        headers:{"Content-Type":"application/json;charset=UTF-8"}
                    }
                    )
                    .then(
                        res => {
                            console.log("结果：", res.data);
                        }
                    ).catch(err => {
                        console.log(err);
                    })
                },
                search4() {
                    // axios.get(url[,config])
                    axios.post("http://localhost:8000/post","name=zhangsan&age=20",{   
                        name:'张三',
                        age:20
                    },{
                        headers:{"Content-Type":"application/x-www-from-urlencided"}
                    }
                    )
                    .then(
                        res => {
                            console.log("结果：", res.data);
                        }
                    ).catch(err => {
                        console.log(err);
                    })
                },
                search5() {
                    let params = new URLSearchParams();
                    params.append("name","zhangsan")
                    params.append("age",20)
                    axios.post("http://localhost:8000/post",params)
                    .then(
                        res => {
                            console.log("结果：", res.data);
                        }
                    ).catch(err => {
                        console.log(err);
                    })
                }
            }
        })
    </script>
</body>

</html>